<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>FFXIV 1.0 Login</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />	
		<link rel="stylesheet" type="text/css" href="css/global.css" />	
		<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
		<script>
			function doLogin(){
				var url = "sapphire-api/lobby/insertSession";
				var params = "{\"sId\":\"" + document.getElementsByName('sid')[0].value + "\",\"secret\":\"" + document.getElementsByName('secret')[0].value + "\",\"accountId\":" + document.getElementsByName('accountId')[0].value + "}";
				var xhr = new XMLHttpRequest();
				xhr.open("POST", url, true);

				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4) {
						try{
							var response = readBody(xhr);
							alert(response);
							var parsed = JSON.parse(response);
						}catch(err){
						}
					}
				}
				
				xhr.send(params);
			}
			
			function readBody(xhr) {
				var data;
				if (!xhr.responseType || xhr.responseType === "text") {
					data = xhr.responseText;
				} else if (xhr.responseType === "document") {
					data = xhr.responseXML;
				} else {
					data = xhr.response;
				}
				return data;
			}	
		</script>
	</head>
	<body oncontextmenu="return false;">
			<div style="width: 80%; height: 300px; margin-left: auto; margin-right: auto; margin-top: 20%">
				<div class="contentContainer" >
					<img style="width: 100%;" src="./sapphire_logo.png" />
				</div>
				
				<div class="contentContainer">
					<div class="info">
						<br />
						<table class="infoForm">
								<tr>
									<td>Secret:</td>
									<td><input type="text" name="secret" /></td>
								</tr>
								<tr>
									<td>sId:</td>
									<td><input type="password" name="sid" /></td>
								</tr>
								<tr>
									<td>accountId:</td>
									<td><input type="password" name="accountId" /></td>
								</tr>
								<tr>
									<td colspan="2">
										<input id="submitButton" type="button" value="insert" onclick="doLogin();" />
									</td>
								</tr>
							</table>
						<p class="errorMessage" id="errorMessage"></p>
					</div>
				</div>
			</div>
	
	</body>
</html>
